<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="零售收银-修改单位和数量">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style>
        .selected-dom{
            border:1px solid #0a60ff;
        }

        dl{
            text-align: right;color: #333;font-weight: bold;font-family: Impact;padding: 0 40px;font-size: 16px;
        }

        .layui-input{
            text-align: right;color: #333;font-weight: bold;font-family: Impact;font-size: 16px;
            padding-right: 30px;
        }
        .layui-input:focus{border-color:#0a60ff!important}
    </style>

    <script>
        jQuery(function () {

            $(window).focus();

            window.addEventListener("keydown", function(e) {
                if (e.keyCode == 0x1B){
                    closeAllDialog();
                } else if (e.keyCode == 0x0D){
                    enter();
                } else if (e.keyCode == 38){
                    up();
                    e.preventDefault();
                } else if (e.keyCode == 40){
                    down();
                    e.preventDefault();
                }
            }, false);

            $(".esc").click(function () {
                closeAllDialog();
            });

            $(".enter").click(function () {
                enter();
            });
            renderPage();

            $('[name="number"]').bind("input propertychange",function(event){
                if (goodsData.packetId == undefined && goodsData.sn) {
                    openDialog("${baseUrl}sale/retail/selectSn.action?houseId="+houseId+"&goodsId="+goodsData.goodsId,"选择序列号",['780px','520px'],function (layero, index) {
                        var iframe = window[layero.find('iframe')[0]['name']];
                        if (goodsData.goodsSnList!=undefined && goodsData.goodsSnList.length > 0) {
                            iframe.setGoodsSnList(goodsData.goodsSnList);
                        }

                        if (goodsSn_map[goodsData.goodsId]!=undefined && goodsSn_map[goodsData.goodsId].length > 0) {
                            iframe.setUsedSnList(goodsSn_map[goodsData.goodsId]);
                        }
                    });
                    return;
                }

                let number = $(this).val();
                if (goodsData.packetId == undefined) {
                    let goodsUnitVo = genUnitVo(goodsData.goodsUnitVoList,goodsData.unitId);
                    if (number.indexOf(".")!=-1 && !goodsUnitVo.point) {
                        tips("不支持小数",this);
                        number = parseInt(number);
                    }
                } else {
                    if (number.indexOf(".") != -1) {
                        tips("不支持小数",this);
                        number = parseInt(number);
                    }
                }

                number = getNumber(parseFloat(number));
                if (number < 0) {
                    tips("不能为负数",this);
                    number = 0;
                }

                if (number > goodsData.stockNum) {
                    tips("不能超过剩余库存",this);
                    number = goodsData.stockNum;
                }

                $(this).val(number);
                goodsData.number = number;
                goodsData.amount = goodsData.number*goodsData.price;
                processAmount();
            });
        });

        layui.use(['form', 'table', 'laydate'], function () {
            let $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laydate = layui.laydate,
                util = layui.util;

            // 监听修改update到表格中
            form.on('select(unitId)', function (data) {
                if (data.value == "") {
                    return;
                }
                goodsData.unitId = data.value;
                let goodsUnitVo = genUnitVo(goodsData.goodsUnitVoList, goodsData.unitId);
                goodsData.price = goodsUnitVo.retailPrice;
                goodsData.times = goodsUnitVo.times;

                $('[name="price"]').val(getPrice(goodsData.price));
                processAmount();
            });
        });



        function up() {
            if ($(".selected-dom").is(".layui-unselect")) {
                if ($(".selected-dom").parent().parent().is(".layui-form-selected")) {
                    let $selectPrev = $(".selected-dom").parent().next().find(".layui-this").prev();
                    if ($selectPrev.length > 0) {
                        $(".selected-dom").parent().next().find("dd").removeClass("layui-this");
                        $selectPrev.addClass("layui-this");
                    }
                    return;
                }
            }

            if (current_index <=1) {
                current_index=1;
            } else {
                current_index--;
            }
            selectLine();

        }
        
        function down() {
            if ($(".selected-dom").is(".layui-unselect")) {
                if ($(".selected-dom").parent().parent().is(".layui-form-selected")) {
                    let $selectNext = $(".selected-dom").parent().next().find(".layui-this").next();
                    if ($selectNext.length > 0) {
                        $(".selected-dom").parent().next().find("dd").removeClass("layui-this");
                        $selectNext.addClass("layui-this");
                    }
                    return;
                }
            }

            if (current_index >=max_index) {
                current_index=max_index;
            } else {
                current_index++;
            }
            selectLine();
        }

        let current_index = 1;
        let max_index = 2;
        function selectLine() {
            $(".upDown").removeClass("selected-dom");
            $("input.layui-unselect").removeClass("selected-dom");
            $(".upDown").blur();

            let $this = $('[index="'+current_index+'"]');
            if ($this.is("select")){
                $this.next().find("input.layui-unselect").addClass("selected-dom");
            } else {
                $this.addClass("selected-dom");
                $this.focus().select();
            }
        }


        function enter() {
            if ($(".selected-dom").is(".layui-unselect")) {
                if ($(".selected-dom").parent().parent().is(".layui-form-selected")){
                    $(".selected-dom").parent().next().find(".layui-this").click();
                    return;
                }
                $(".selected-dom").click();
            } else {
                if (goodsData.number == 0) {
                    errTip("数量不能为0");
                    return;
                }

                window.parent.getChangeData(goodsData);
                closeAllDialog();
            }
        }

        function closeAllDialog() {
            window.parent.closeAllDialog();
        }

        let goodsData = undefined;
        let houseId;
        let goodsSn_map;
        function setGoodsData(data,inHouseId, map) {
            goodsData = data;
            houseId = inHouseId;
            goodsSn_map = map;
            renderPage();
        }

        function processAmount(){
            goodsData.amount = goodsData.number*goodsData.price;
            $("#amount").html(getPrice(goodsData.amount));
        }

        function renderPage(){
            if (goodsData == undefined) {
                return;
            }

            $("#goods-name").html(goodsData.name);
            $("#stock").html(goodsData.stockNum);


            let $select = $("[name='unitId']");
            $select.empty();
            if (goodsData.packetId == undefined) {
                $.each(goodsData.goodsUnitVoList,function (i,d) {
                    $select.append("<option dl-index='"+(i+1)+"' value='"+d.unit.id+"'>"+d.unit.name+"</option>");
                });
            } else{
                $select.append("<option dl-index='1' value=''>无</option>");
            }
            formRender();

            formSetVal("form",goodsData);

            $("[name='price']").val(getPrice(goodsData.price));
            $("[name='number']").val(getNumber(goodsData.number));
            processAmount();


            current_index=2;
            selectLine();
        }


        /**
         * 如果使用sn选择窗口，必须实现此函数，否则取不到已选择的序列号
         * @param data
         */
        function getSelectSnList(snList) {
            $(window).focus();
            $('[name="number"]').focus().select();
            if (snList.length == 0) {
                return;
            }

            goodsData.goodsSnList = snList;
            goodsData.number = snList.length;
            goodsData.amount = goodsData.number*goodsData.price;
            $('[name="number"]').val(goodsData.number);
            processAmount();
        }



        function openDialog(url, title, area,process) {
            let config = {
                title: false,
                type: 2,
                shade: 0.6,
                area: ['700px', '520px'],
                maxmin:false,
                shadeClose: false,
                content: url,
                success: function(layero, index){
                    if (process != undefined){
                        process(layero, index);
                    }
                },
            };

            if (title!=undefined) {
                config.title = [title, 'font-size:18px;font-weight:bold;'];
            }

            if (area != undefined) {
                config.area = area;
            }

            let index = layer.open(config);
        }
    </script>
</html:header>
<body style="margin:0;background-color: #FFFFFF;height: 380px;width: 660px;padding: 30px 60px 0px 60px;">
    <div id="goods-name" style="font-size: 24px;width: 100%; text-align: left;margin-bottom: 20px;"></div>
    <form class="layui-form layui-form-pane" lay-filter="form">
        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size: 16px;color: #666;">单位</label>
            <div class="layui-input-block">
                <select name="unitId" lay-filter="unitId" class="upDown" index="1">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size: 16px;color: #666;">零售价</label>
            <div class="layui-input-block">
                <input type="number" name="price" autocomplete="off" readonly class="layui-input readonly">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="font-size: 16px;color: #666;">数量</label>
            <div class="layui-input-block">
                <input type="number" name="number" autocomplete="off" class="upDown layui-input" index="2">
            </div>
        </div>
    </form>

    <div style="margin: 20px 0;overflow: hidden;">
        <div style="float: left;height: 51px;line-height: 51px;font-size: 18px; color: #666;">
            剩余库存
            <span id="stock" style="font-size: 22px;font-weight: bold;color:#FFB800; padding: 0 20px;">0</span>
        </div>

        <div style="float: right;height: 51px;line-height: 51px;font-size: 18px; color: #666;">
            小计
            <span id="amount" style="font-size: 22px;font-weight: bold;color:#FFB800; padding: 0 20px;">0.00</span>
            元
        </div>
    </div>


    <hr>
    <div style="margin-top: 20px;overflow: hidden;">
        <div style="float: right;">
            <button class="layui-btn layui-btn-normal enter">确定(Enter)</button>
            <button class="layui-btn layui-btn-primary esc">取消(Esc)</button>
        </div>
    </div>

</body>

</html>